<template>
  <div class="login-container">
    <div class="letf">
      <el-form
        ref="formRef"
        class="login-form"
        auto-complete="on"
        label-position="left"
      >
        <el-form-item prop="机构编号" label="机构编号">
          <el-input
            v-model="model.branch"
            ref="机构编号"
            placeholder="机构编号"
            name="机构编号"
            type="text"
            tabindex="1"
            auto-complete="on"
            @focus="handleFocus(model.branch)"
          />
        </el-form-item>

        <el-form-item prop="账户" label="账 户 :  ">
          <el-input
            v-model="model.uid"
            ref="账户"
            placeholder="账户"
            name="账户"
            tabindex="2"
            auto-complete="on"
            @focus="handleFocus(model.uid)"
          />
        </el-form-item>

        <el-form-item prop="密码" label="密 码 :  ">
          <el-input
            v-model="model.pw"
            ref="密码"
            placeholder="密码"
            name="密码"
            tabindex="2"
            auto-complete="on"
            @focus="handleFocus(model.pw)"
          />
        </el-form-item>
        <el-button type="primary" style="color: #fff"
          >前 台 收 银 登 录</el-button
        >
      </el-form>
    </div>
    <NumberKeyboard v-model="model"></NumberKeyboard>
  </div>
</template>

<script lang="ts">
export default {
  name: "Login",
};
</script>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { NumberKeyboard } from "@/components";
const model = ref({
  branch: "1001", //机构编号
  uid: "admin", //账户
  pw: "123456", //密码
  loginty: "pos", //登录类型-前台固定值"pos"
  terminal: "tt", //终端号loginty=pos时必填
});
const submit = () => {
  console.log(JSON.stringify(model.value));
};

const handleFocus = (inputRef: string) => {
  console.log(`Input with ref "${inputRef}" focused.`);
};
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  min-height: 100%;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(to bottom right, #4facfe, #00f2fe);

  .letf {
    width: 40%;
    margin-right: 20px;
    height: 45%;
  }
}
</style>
